<template>
  <div id="topbar">
    <div class="logo">
      <!-- <img src="../../assets/logo.png" /> -->
      <span>e安行实训平台管理系统|教师端</span>
    </div>
    <div id="userinfo">
      <span>当前登录：{{user_name}}</span>
      <span class="logout" @click="onLogout">退出登录</span>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';
import {logout} from '@/api/models.js';
import requestConfig from '@/api/config.js';
import Cookies from 'js-cookie';
export default {
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      user_name: ''
    }
  },
  computed: {
    
  },
  mounted() {
    this.user_name = Cookies.get('USER_PHONE');
  },
  methods: {
    ...mapMutations('setting', {
      toggleSidebarCollapse: 'toggleSidebarCollapse'
    }),
    onFold() {
      this.toggleSidebarCollapse()
    },
    onLogout() {
      logout(() => {
        location.href = requestConfig[process.env.NODE_ENV].loginPage
      })
    }
  }
}
</script>

<style lang="scss">
#topbar{
  width: 100%;
  height: 60px;
  background-color: rgba(255, 102, 51, 1);
  color: #fff;
  line-height: 60px;
  .icon-fold{
    font-size: 28px;
    cursor: pointer;
    float: left;
  }
  #userinfo{
    float: right;
    margin-right: 25px;
  }
  #userinfo span:first-child{
    margin-right: 20px;
  }
  .logout{
    cursor: pointer;
  }
  .logo{
    float: left;
    display: flex;
    align-items: center;
    margin-left: 20px;
  }
  .logo span{
    margin-left: 20px;
  }
}
</style>